﻿<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:AmazingWPFControls.AnimatedExpander">

    <Style x:Key="ExpanderDownHeaderStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid SnapsToDevicePixels="False" Background="Transparent">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="19" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Ellipse HorizontalAlignment="Center" x:Name="circle" VerticalAlignment="Center" Width="19"
                                    Height="19" Fill="{DynamicResource ButtonNormalBackgroundFill}" Stroke="DarkGray" />
                            <Ellipse Visibility="Hidden" HorizontalAlignment="Center" x:Name="shadow"
                                    VerticalAlignment="Center" Width="17" Height="17"
                                    Fill="{DynamicResource ExpanderShadowFill}" />
                            <Path SnapsToDevicePixels="false" HorizontalAlignment="Center" x:Name="arrow"
                                    VerticalAlignment="Center" Stroke="#666" StrokeThickness="2"
                                    Data="M 1,1.5 L 4.5,5 L 8,1.5" />
                            <ContentPresenter SnapsToDevicePixels="True" HorizontalAlignment="Left" Margin="4,0,0,0"
                                    VerticalAlignment="Center" Grid.Column="1" RecognizesAccessKey="True" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Stroke" TargetName="circle" Value="#666" />
                            <Setter Property="Stroke" TargetName="arrow" Value="#222" />
                            <Setter Property="Visibility" TargetName="shadow" Value="{x:Static Visibility.Visible}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ExpanderRightHeaderStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid SnapsToDevicePixels="False" Background="Transparent">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="19" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid>
                                <Grid.LayoutTransform>
                                    <TransformGroup>
                                        <TransformGroup.Children>
                                            <TransformCollection>
                                                <RotateTransform Angle="-90" />
                                            </TransformCollection>
                                        </TransformGroup.Children>
                                    </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse HorizontalAlignment="Center" x:Name="circle" VerticalAlignment="Center"
                                        Width="19" Height="19" Fill="{DynamicResource ButtonNormalBackgroundFill}"
                                        Stroke="DarkGray" />
                                <Ellipse Visibility="Hidden" HorizontalAlignment="Center" x:Name="shadow"
                                        VerticalAlignment="Center" Width="17" Height="17"
                                        Fill="{DynamicResource ExpanderShadowFill}" />
                                <Path SnapsToDevicePixels="false" HorizontalAlignment="Center" x:Name="arrow"
                                        VerticalAlignment="Center" Stroke="#666" StrokeThickness="2"
                                        Data="M 1,1.5  L 4.5,5  L 8,1.5" />
                            </Grid>
                            <ContentPresenter SnapsToDevicePixels="True" HorizontalAlignment="Center" Margin="0,4,0,0"
                                    VerticalAlignment="Top" Grid.Row="1" RecognizesAccessKey="True" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Stroke" TargetName="circle" Value="#666" />
                            <Setter Property="Stroke" TargetName="arrow" Value="#222" />
                            <Setter Property="Visibility" TargetName="shadow" Value="{x:Static Visibility.Visible}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ExpanderUpHeaderStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid SnapsToDevicePixels="False" Background="Transparent">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="19" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid>
                                <Grid.LayoutTransform>
                                    <TransformGroup>
                                        <TransformGroup.Children>
                                            <TransformCollection>
                                                <RotateTransform Angle="180" />
                                            </TransformCollection>
                                        </TransformGroup.Children>
                                    </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse HorizontalAlignment="Center" x:Name="circle" VerticalAlignment="Center"
                                        Width="19" Height="19" Fill="{DynamicResource ButtonNormalBackgroundFill}"
                                        Stroke="DarkGray" />
                                <Ellipse Visibility="Hidden" HorizontalAlignment="Center" x:Name="shadow"
                                        VerticalAlignment="Center" Width="17" Height="17"
                                        Fill="{DynamicResource ExpanderShadowFill}" />
                                <Path SnapsToDevicePixels="false" HorizontalAlignment="Center" x:Name="arrow"
                                        VerticalAlignment="Center" Stroke="#666" StrokeThickness="2"
                                        Data="M 1,1.5  L 4.5,5  L 8,1.5" />
                            </Grid>
                            <ContentPresenter SnapsToDevicePixels="True" HorizontalAlignment="Left" Margin="4,0,0,0"
                                    VerticalAlignment="Center" Grid.Column="1" RecognizesAccessKey="True" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Stroke" TargetName="circle" Value="#666" />
                            <Setter Property="Stroke" TargetName="arrow" Value="#222" />
                            <Setter Property="Visibility" TargetName="shadow" Value="{x:Static Visibility.Visible}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ExpanderLeftHeaderStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid SnapsToDevicePixels="False" Background="Transparent">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="19" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid>
                                <Grid.LayoutTransform>
                                    <TransformGroup>
                                        <TransformGroup.Children>
                                            <TransformCollection>
                                                <RotateTransform Angle="90" />
                                            </TransformCollection>
                                        </TransformGroup.Children>
                                    </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse HorizontalAlignment="Center" x:Name="circle" VerticalAlignment="Center"
                                        Width="19" Height="19" Fill="{DynamicResource ButtonNormalBackgroundFill}"
                                        Stroke="DarkGray" />
                                <Ellipse Visibility="Hidden" HorizontalAlignment="Center" x:Name="shadow"
                                        VerticalAlignment="Center" Width="17" Height="17"
                                        Fill="{DynamicResource ExpanderShadowFill}" />
                                <Path SnapsToDevicePixels="false" HorizontalAlignment="Center" x:Name="arrow"
                                        VerticalAlignment="Center" Stroke="#666" StrokeThickness="2"
                                        Data="M 1,1.5 L 4.5,5 L 8,1.5" />
                            </Grid>
                            <ContentPresenter SnapsToDevicePixels="True" HorizontalAlignment="Center" Margin="0,4,0,0"
                                    VerticalAlignment="Top" Grid.Row="1" RecognizesAccessKey="True" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Stroke" TargetName="circle" Value="#666" />
                            <Setter Property="Stroke" TargetName="arrow" Value="#222" />
                            <Setter Property="Visibility" TargetName="shadow" Value="{x:Static Visibility.Visible}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="AnimatedExpanderTemplate" TargetType="{x:Type Expander}">

        <ControlTemplate.Resources>
            <ResourceDictionary>
                <Storyboard x:Key="scaleYUp">
                    <DoubleAnimation From="0" To="1" Duration="0:0:0.25" Storyboard.TargetName="ExpandSite"
                            Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />

                </Storyboard>
                <Storyboard x:Key="scaleYDown">
                    <DoubleAnimation From="1" To="0" Duration="0:0:0.25" Storyboard.TargetName="ExpandSite"
                            Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
                    
                </Storyboard>
                <Storyboard x:Key="scaleXUp">
                    <DoubleAnimation From="0" To="1" Duration="0:0:0.25" Storyboard.TargetName="ExpandSite"
                            Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)" />

                </Storyboard>
                <Storyboard x:Key="scaleXDown">
                    <DoubleAnimation From="1" To="0" Duration="0:0:0.25" Storyboard.TargetName="ExpandSite"
                            Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)" />

                </Storyboard>
            </ResourceDictionary>
        </ControlTemplate.Resources>

        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="true">
            <DockPanel>
                <ToggleButton IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, 
                                    RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinHeight="0"
                        MinWidth="0" x:Name="HeaderSite" Style="{StaticResource ExpanderDownHeaderStyle}">
                    <ContentPresenter Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" Margin="1"
                            Focusable="false" />
                </ToggleButton>

                <ContentPresenter x:Name="ExpandSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="{TemplateBinding Padding}" Focusable="false">
                    <ContentPresenter.LayoutTransform>
                        <ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" />
                    </ContentPresenter.LayoutTransform>
                    
                </ContentPresenter>
            </DockPanel>
        </Border>
        <ControlTemplate.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsExpanded" Value="True" />
                    <Condition Property="ExpandDirection" Value="Up" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource scaleYUp}" />
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource scaleYDown}" />
                </MultiTrigger.ExitActions>
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsExpanded" Value="True" />
                    <Condition Property="ExpandDirection" Value="Down" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource scaleYUp}" />
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource scaleYDown}" />
                </MultiTrigger.ExitActions>
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsExpanded" Value="True" />
                    <Condition Property="ExpandDirection" Value="Left" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource scaleXUp}" />
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource scaleXDown}" />
                </MultiTrigger.ExitActions>
            </MultiTrigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsExpanded" Value="True" />
                    <Condition Property="ExpandDirection" Value="Right" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource scaleXUp}" />
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource scaleXDown}" />
                </MultiTrigger.ExitActions>
            </MultiTrigger>

            <Trigger Property="ExpandDirection" Value="Down">
                <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Bottom" />
                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Top" />

            </Trigger>
            <Trigger Property="ExpandDirection" Value="Up">
                <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top" />
                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom" />
                <Setter Property="Style" TargetName="HeaderSite" Value="{DynamicResource ExpanderUpHeaderStyle}" />

            </Trigger>
            <Trigger Property="ExpandDirection" Value="Right">
                <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right" />
                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left" />
                <Setter Property="Style" TargetName="HeaderSite" Value="{DynamicResource ExpanderRightHeaderStyle}" />

            </Trigger>

            <Trigger Property="ExpandDirection" Value="Left">
                <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left" />
                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right" />
                <Setter Property="Style" TargetName="HeaderSite" Value="{DynamicResource ExpanderLeftHeaderStyle}" />
            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="ourAnimatedExpanderStyle" TargetType="{x:Type Expander}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template" Value="{StaticResource AnimatedExpanderTemplate}" />
    </Style>

    <Style TargetType="{x:Type local:AnimatedExpander}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template" Value="{StaticResource AnimatedExpanderTemplate}" />
    </Style>
</ResourceDictionary>